<style type="text/css">
/***********/
.top-bar-search {
    height: 34px;
    width: auto;
	position:relative;
}
.top-bar-search .listing-tbs {
    display: inline;
    float: left;
    margin: 9px 10px 0;
}
.top-bar-search .listing-tbs li {
    display: inline;
    float: left;
    margin-left: -2px;
}
.top-bar-search .listing-tbs li .vip-tbs {
    padding: 0 0 0 20px;
}
.top-bar-search .listing-tbs li a {
    color: #3366CC;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    line-height: 18px;
    padding: 0 10px;
}
.top-bar-search .listing-tbs li .active {
    color: #333333;
    height: 23px;
    margin-top: -4px;
    padding-top: 4px;
	padding-bottom:2px;
}

/******Product_canhan*****/
.list-product {
    padding: 10px 0;
}
.item-product {
    margin:5px 23px 20px 5px;
    position: relative;
    width: 160px;
	padding-bottom:10px;
	border-bottom:1px solid #dfdfdf;
}
.details_product {
    float: left;
    width: 160px;
}
.details_product * {
	font-size:12px;
}
.name_product a {
	color:#0066CC;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:16px;
}

.fl {
    border: 0px solid #CCCCCC !important;
	background:none;
}
.block {
    margin: 5px !important;
}
.picture_small_dt {
    margin-bottom: 10px;
    position: relative;
    text-align: left;
    width: 145px;
	margin:0px auto;
	margin-bottom:10px;
}

.picture_small_dt span {
    color: white;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    line-height: 12px;
    padding: 12px 4px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 44px;
    background:url({STATICURL}shop/images/abel_643.png) no-repeat;
}
.add-name a {
    color: #0066CC;
    line-height: 15px;
    overflow: hidden;
    text-align: left;
}
.add-name {
	height:30px;
	overflow:hidden;
}
.LIST_GRID .add-name {
	height:35px;
}
.pprice_pr {
    height: 35px;
    padding-top: 5px;
}
.add-sale {
    color: #666666;
    height: 15px;
    overflow: hidden;
    text-align: left;
    text-decoration: line-through;
}
.add-pr {
    color: red;
    font-weight: bold;
    height: 20px;
    overflow: hidden;
    text-align: left;
}
.add-about {
    height: 16px;
    overflow: hidden;
    text-align: left;
}
.add-comment, .add-about, about-web {
    color: #666666;
}
.name_shop {
    color: #999999;
    font-size: 11px;
    text-align: left;
}
.name_shop {
    color: #999999;
    font-size: 11px;
    text-align: left;
}
.name_shop a {
    color: #3366CC;
}
/*** Tooltip ***/
.hidden{
display:none;
}

#tooltip{
background:#FFFFFF;
border:1px #CCCCCC solid;
border-radius:0.5em;
-moz-border-radius:0.5em;
padding:8px 9px 8px 9px;
position:absolute;
z-index:3000;
}
#tooltip.tooltip_content .title{
color:#e97d13;
font-size:16px;
font-weight:bold;
overflow:hidden;
margin-bottom:10px;
text-align:left;
}
#tooltip.tooltip_content .content, #tooltip.tooltip_content .content *{
line-height:150%;
}
#tooltip.tooltip_picture .name{
color:#e97d13;
font-size:14px;
font-weight:bold;
margin-bottom:5px;
}
#tooltip.tooltip_picture .price_product{
margin-bottom:5px;
}
#tooltip.tooltip_picture .picture{
text-align:center;
}
#tooltip.tooltip_product .margin{
margin-bottom:5px;
}
#tooltip.tooltip_product .city b{
color:#003399;
font-weight:normal;
}
#tooltip.tooltip_product .city .suggest{
color:#FF0000;
font-family:Tahoma;
}
#tooltip.tooltip_product .quality b{
color:#003399;
}
#tooltip.tooltip_product .company{
color:#003399;
margin-bottom:5px;
}
#tooltip.tooltip_product .estore{
color:#003399;
}
#tooltip.tooltip_product .teaser{
font-size:11px;
}
#tooltip.tooltip_review .picture, #tooltip.tooltip_product .picture, #tooltip.tooltip_product .picture_only{
text-align:center;
}
#tooltip.tooltip_review .name, #tooltip.tooltip_product .name{
color:#e97d13;
font-size:14px;
font-weight:bold;
margin-bottom:10px;
}
#tooltip.tooltip_review .picture, #tooltip.tooltip_product .picture{
margin-bottom:10px;
}
#tooltip.tooltip_review .price_product, #tooltip.tooltip_product .price_product{
margin-bottom:3px;
}

.domTTOverlib{
background:#FFFFFF;
border:1px #CCCCCC solid;
border-radius:0.5em;
-moz-border-radius:0.5em;
padding:8px 9px 8px 9px;
}
.domTTOverlib a{
color:#003399;
}
.domTTOverlib a:hover{
color:#e97d13;
}
.add-img img {
    height: 140px;
    margin: 0 auto;
    width: 140px;
}
.icon-list-grid {
    position: absolute;
    right: 10px;
    top: 8px;
}
.img_grid {
	cursor:pointer;
	width:20px;
	height:20px;
	display:block;
	float:left;
    background: url({STATICURL}shop/images/srpIcons.png) no-repeat -23px -1px;
}
.img_list {
	cursor:pointer;
	width:20px;
	height:20px;
	display:block;
	float:left;
    background: url({STATICURL}shop/images/srpIcons.png) no-repeat 0 -1px;
}
.icon-list-grid .box_img2 a.active {
    background: url({STATICURL}shop/images/srpIcons.png) no-repeat 0px -23px !important;
}
.icon-list-grid .box_img1 a.active {
    background: url({STATICURL}shop/images/srpIcons.png) no-repeat -23px -23px !important;
}



.LIST_GRID .picture_small_dt {
	margin:0;
}
.LIST_GRID .item-product {
    margin: 0 !important;
	border-bottom:0px !important;
}
.LIST_GRID .item-product {
    padding: 0 !important;
    width: 100% !important;
}
.LIST_GRID .home_details {
    width: 795px !important;
}
.LIST_GRID .details_product {
    background: url({STATICURL}shop/images/bggrid.gif) repeat-y 74% 50%;
}
.LIST_GRID .details_product {
    position: relative !important;
}
.LIST_GRID .details_product {
	border-bottom:1px solid #dfdfdf !important;
    float: none !important;
    min-height: 140px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    width: 755px !important;
}
.LIST_GRID .block {
    margin: 0 !important;
}
.LIST_GRID .add-img {
    margin: 5px;
}
.LIST_GRID .add-name {
    left: 155px !important;
    position: absolute !important;
    top: 20px !important;
    width: 390px !important;
}
.LIST_GRID .add-name a {
    font-size: 14px;
    text-align: left !important;
}
.LIST_GRID .GRID_thongtin {
    display: block !important;
    height: 80px !important;
    left: 155px !important;
    margin-bottom: 10px !important;
    overflow: hidden;
    position: absolute !important;
    top: 55px !important;
    width: 390px !important;
}
.LIST_GRID .GRID_ONCL {
    position: absolute !important;
    right: 2px !important;
    top: 15px !important;
    width: 175px;
}
.LIST_GRID .pprice_pr {
    padding-top: 0;
}
.LIST_GRID .box_them {
    margin: 5px 0;
}
.LIST_GRID .add-pr {
    margin: 5px 0 !important;
}
.LIST_GRID .name_shop {
    display: block;
}

/*-- End Tooltip --*/


</style>

<script language="javascript">
	jQuery(document).ready(function() {	
		jQuery('.__MB_NEWS_TAB li a').click(function(){
		var getTabId		=		jQuery(this).attr('id'); 
		jQuery('.__MB_CONTAINER').hide();
		jQuery('.__MB_NEWS_TAB li a').removeClass('active');
		jQuery(this).addClass('active');		
		jQuery('.__MB_CONTAINER_'+getTabId).show();
	});
});
</script>
    <div id="box_product_individuals" class="box_product_individuals move-span">
        <div id="box_sale_hot" class="cl">
            <div class="top-bar-search blocktitle title">
                <ul class="listing-tbs __MB_NEWS_TAB">
                    <li><a href="home.php?mod=space&username=$space[username]&do=shopping" id="1" class="{if $_G['gp_status'] != 'salesoff'}active{/if}">Tất cả</a></li>
                    <li><a href="home.php?mod=space&username=$space[username]&do=shopping&status=salesoff" id="2" class="{if $_G['gp_status'] == 'salesoff'}active{/if}">Đang khuyến mãi</a></li>
                </ul>
                <samp class="icon-list-grid news_list_grid">
                    <span class="box_img1">
                        <a id="grid3" class="img_grid active" onclick="swicth_class('LIST_GRID', '', 'LIST_GRID', 'grid3', 'active', 'list3')"></a>
                    </span>
                    <span class="box_img2">
                        <a id="list3" class="img_list " onclick="swicth_class('LIST_GRID', 'LIST_GRID', '', 'list3', 'active', 'grid3')"></a>
                    </span>
                </samp>
            </div>
            
            <div id="LIST_GRID" class="box_product_list">
                <div class="list-product list_review clearfix">
                    <div class="list_review cl" >
                        <!--{loop $shop_products $key $value}-->
                        <div class="item-product z" >
                            <div class="fl width_3 details_product home_details">
                                <div class="block">
                                    <div class="picture_small_dt">
                                        <a href="shop.php?mod=products&name={echo locdau($value[pname]);}&pid=$key" class="add-img tooltip" ><img src="$value[imgcoverthumb]" /></a>
                                        <!--{if $value[sales_status]}-->
                                        <span>Giảm $value[sales]%</span>
                                        <!--{/if}-->
                                    </div>
                                    <div class="home_thongtin add-name " title="$value[pname]"><a href="shop.php?mod=products&name={echo locdau($value[pname]);}&pid=$key">$value[pname]</a></div>
                                    <div class="home_thongtin GRID_thongtin " style="display:none;">$value[summary]</div>
                                    <div class="GRID_ONCL">
                                        <!--{if $value['sales_status']}-->
                                        <div class="pprice_pr">
                                            <div class="add-sale">$value[pprice]</div>
                                            <div class="add-pr">$value[end_price]</div>
                                        </div>    
                                        <!--{else}-->
                                        <div class="pprice_pr">
                                            <div class="add-pr">$value['pprice']</div>
                                        </div>    
                                        <!--{/if}--> 
                                        <div class="box_them">
                                            <div class="add-about">Nơi rao bán: <span style="color:red">{if $value[province]}$value[province]{else}Toàn quốc{/if}</span></div>
                                            <div class="name_shop">Cập nhật: <!--{date($value[lastupdate], '', 9999, $_G[setting][dateformat])}--></div>
                                            <div class="name_shop">Lượt xem: <samp>$value[view]</samp></div>
                                        </div>
                                    </div>
                                </div>
                                <pre class="hidden">
                                    <div class="name_product"><a href="#">$value[pname]</a></div>
                                    <div class="add-img2"><img style="max-height:320px; max-width:320px;" src="$value[imgcoverthumbbig]" /></div>
                                    <div class="add-thongtin">$value[summary]</div>
                                    <!--{if $value[sales_status]}-->
                                    <div class="add-sale">$value[pprice]</div>
                                    <div class="add-pr">$value[end_price]</div>
                                    <!--{else}-->
                                    <div class="add-pr">$value[pprice]</div>
                                    <!--{/if}-->
                                    <div class="box_them">
                                        <div class="add-about">Nơi rao bán: <span style="color:red">{if $value[province]}$value[province]{else}Toàn quốc{/if}</span></div>
                                        <div class="name_shop">Cập nhật: <!--{date($value[lastupdate], '', 9999, $_G[setting][dateformat])}--></div>
                                        <div class="name_shop">Lượt xem: <samp>$value[view]</samp></div>
                                    </div>
                                </pre>
                            </div>
                        </div>
                        <!--{/loop}-->
                    </div>
                    <br />
                    $shop_productsMulti
                </div>
            </div>
            
            
        </div><!--Content-->
    </div>
<script type="text/javascript" src="{STATICURL}shop/js/tooltip.js"></script>
<script type="text/javascript">
	/*** Tooltip ***/
	var isIE	= (navigator.userAgent.toLowerCase().indexOf("msie") == -1 ? false : true);
	var isIE6	= (navigator.userAgent.toLowerCase().indexOf("msie 6") == -1 ? false : true);
	var isIE7	= (navigator.userAgent.toLowerCase().indexOf("msie 7") == -1 ? false : true);
	var isChrome= (navigator.userAgent.toLowerCase().indexOf("chrome") == -1 ? false : true);
	function tooltipContent(){
		if(isIE6 || isIE7) return;
		jQuery(".tooltip_content").tooltip({
			bodyHandler: function(){
				width		= 400;
				if(typeof(jQuery(this).attr("tooltipWidth")) != "undefined"){
					width	= parseInt(jQuery(this).attr("tooltipWidth"));
				}
				jQuery("#tooltip").css("width", width + "px");
				eval("content	= " + jQuery(this).attr("tooltipContent") + ";");
				return content;
			},
			track: true,
			showURL: false,
			extraClass: "tooltip_content"
		});
	}
	
	function tooltipReview(){
		if(isIE6 || isIE7) return;
		jQuery(".list_review pre").each(function(index, domEle){
			obTT	= jQuery(domEle).parent().find(".tooltip");
			obTT.tooltip({
				bodyHandler: function(){
					jQuery("#tooltip").css("width", "320px");
					jQuery(domEle).find(".picture, .picture_only").html(function(index, html){
						return '<img src="' + jQuery(this).attr("src") + '" />';
					});
					return jQuery(domEle).html();
				},
				track: true,
				showURL: false,
				extraClass: "tooltip_review"
			});
		});
	}
	tooltipContent();
	jQuery(function(){ tooltipReview(); });
	/*-- End Tooltip --*/
</script>